<template>
  <section class="component reduction-apply">
    <el-form
      :model="dataForm"
      :rules="rules"
      label-width="122px"
      ref="dataFrom"
    >
      <el-form-item label="申请减免金额" prop="derateAmount">
        <el-input-number
          :min="0"
          :precision="2"
          v-model="dataForm.derateAmount"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="上传文件" prop="fileIds">
        <file-upload
          :AllowExtension="['jpeg', 'jpg', 'png', 'doc', 'docx', 'pdf', 'txt','xls', 'xlsx']"
          :fileList.sync="fileList"
          ref="upload_case_import"
        ></file-upload>
      </el-form-item>
      <el-form-item label="申请原因" prop="applyDescription">
        <el-input
          :maxlength="500"
          :rows="3"
          type="textarea"
          v-model.trim="dataForm.applyDescription"
          show-word-limit
        ></el-input>
      </el-form-item>
    </el-form>

    <div class="operate-buttons">
      <el-button @click="emitClose">取消</el-button>
      <el-button :loading="submitLoading" @click="commit">确定</el-button>
    </div>

    <!-- 检查 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      :visible.sync="dialog"
      append-to-body
      title="检查结果"
      width="800px"
    >
      <check-apply
        :applyType="applyType"
        :messageData="checkMessages"
        @close="cancelContinue()"
        @success="
          dialog = false;
          confirmSubmit();
        "
      ></check-apply>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import { Vue, Component, Emit, Prop } from "vue-property-decorator";
import CheckApply from "~/components/visit-case/check-apply.vue";
import { Dependencies } from "~/core/decorator";
import { FlowTaskService } from "~/services/domain-service/flow-task.service";
import { Form } from "element-ui";
import { CaseApplyRecordService } from "~/services/domain-service/case-apply-record.service";
import FileUpload from "~/components/common/file-upload.vue";

@Component({
  components: {
    CheckApply,
    FileUpload
  }
})
export default class ReductionApply extends Vue {
  @Dependencies(FlowTaskService)
  private flowTaskService: FlowTaskService;
  @Dependencies(CaseApplyRecordService)
  private caseApplyRecordService: CaseApplyRecordService;

  @Prop({ type: String }) private applyType;
  @Prop({ type: Array, required: true }) private caseIds;

  private dataForm: any = {
    confirm: 0,
    caseIds: [],
    applyCategory: "",
    derateAmount: "",
    fileIds: ""
  };
  private fileList: any[] = [];
  private checkMessages: any = {};
  private rules: any = {
    derateAmount: { required: true, message: "请输入申请减免金额" },
    applyDescription: { required: true, message: "请输入申请原因" }
  };
  private submitLoading: boolean = false;
  private dialog: boolean = false;

  @Emit("close") private emitClose() {
    this.resetDate();
  }

  /**
   * 提交
   */
  private commit() {
    const dataFrom: any = this.$refs["dataFrom"];
    dataFrom.validate(valid => {
      if (!valid) return false;
      // this.commitNext();
      this.submit()
    });
  }

  /**
   * 检查案件
   */
  // private commitNext() {
  //   this.flowTaskService.checkApplyCategory({ applyCategory: this.applyType }).subscribe(data => {
  //     // 0 拒绝，1 提示，2 通过
  //     if (data.status === 1) {
  //       this.$confirm("该" + this.$dict.getDictName(this.applyType, "ApplyCategory") + "申请将直接生效，是否继续?", "提示", {
  //           confirmButtonText: "确定",
  //           cancelButtonText: "取消",
  //           type: "warning"
  //         }
  //       ).then(() => {
  //         this.submit();
  //       }).catch(this.error);
  //     } else if (data.status === 2) {
  //       this.submit();
  //     }
  //   }, this.error);
  // }

  /**
   * 提交接口调用
   */
  private submit() {
    let flag
    flag = this.fileList.find(e => e.status === 'ready')
    if(!flag) {
      this.submitLoading = true
      this.dataForm.caseIds = this.caseIds;
      this.dataForm.applyCategory = this.applyType;
      this.dataForm.fileIds = this.fileList.map(v => v.response.id).toString();
      this.caseApplyRecordService.applyDerateCase(this.dataForm).subscribe(this.success, this.error);
    } else {
      this.$message.warning('文件格式不正确')
      this.fileList = []
      this.submitLoading = false
    }
  }

  /**
   * 申请成功
   */
  private success(data: any) {
    if (data && data.status !== 2) {
      this.checkMessages = data;
      this.dialog = true;
    } else {
      this.submitLoading = false;
      this.$message.success("操作成功");
      this.emitClose();
    }
  }

  /**
   * 失败
   */
  private error() {
    this.submitLoading = false;
  }

  /**
   * 取消
   */
  private cancelContinue() {
    this.dialog = false;
    this.submitLoading = false;
  }

  /**
   * 继续提交
   */
  private confirmSubmit() {
    this.dataForm.confirm = 1;
    this.submit();
  }

  /**
   * 数据重置
   */
  private resetDate() {
    this.dataForm = {
      confirm: 0,
      caseIds: [],
      applyCategory: "",
      derateAmount: "",
      fileIds: ""
    };

    const form: any = this.$refs["dataFrom"] as Form;
    form.resetFields();

    this.checkMessages = {};

    this.fileList = [];
  }
}
</script>

<style lang="less"></style>
